import MyIcon from '@/components/MyIcon';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Col, Empty, Row, Timeline } from 'antd';
import { useContext } from 'react';
import { AnnounceManageAPI } from '../common/type';
import { AnnounceDetailContext } from '../common/UpdateContext';

export const DetailCheckListView: React.FC<AnnounceManageAPI.IDetailCheckListView> = () => {
  const { announceInfo, prefixCls } = useContext(AnnounceDetailContext);

  /**
   * 处理时间轴左侧时间 和日期换行
   * @param time 传入的时间
   * @returns
   */
  const handleCheckTime = (time: any) => {
    let dateStr: string = '';
    let timeStr: string = '';
    if (time) {
      dateStr = time?.split(' ')?.[0];
      timeStr = time?.split(' ')?.[1];
    }
    return {
      dateStr,
      timeStr,
    };
  };

  /**
   * 处理审核状态颜色
   * @param checkState 传入的当前审核状态
   * @returns
   */
  const checkStateColor = (checkState: any) => {
    let stateColor: any = '';
    if (checkState == 0) {
      stateColor = '#096dd9';
    }
    if (checkState == 1) {
      stateColor = '#52c41a';
    }
    if (checkState == 2) {
      stateColor = '#ff0003';
    }
    if (checkState == 3) {
      stateColor = '#bbbbbb';
    }
    return stateColor;
  };

  return (
    <>
      {announceInfo?.checkList && announceInfo?.checkList?.length > 0 ? (
        <ScrollBarLayout
          style={{
            padding: '0px 10px 5px 0px',
          }}
        >
          <div className={prefixCls + 'tmplTimeline'}>
            <Timeline pending={true} pendingDot={<></>}>
              {announceInfo?.checkList?.map((item: any) => {
                const { dateStr, timeStr } = handleCheckTime(
                  item?.checkTime ? item?.checkTime : item?.applyTime,
                );
                return (
                  <Timeline.Item
                    key={item?.id}
                    dot={
                      <MyIcon
                        style={{ fontSize: 18 }}
                        type="icon-time-circle"
                      />
                    }
                    label={
                      <>
                        <div
                          className={prefixCls + 'tmplTimeline-leftDateSpan'}
                        >
                          {dateStr}
                        </div>
                        <div
                          className={prefixCls + 'tmplTimeline-leftHourSpan'}
                        >
                          {timeStr}
                        </div>
                      </>
                    }
                  >
                    <Row className={prefixCls + 'tmplTimeline-contentRow'}>
                      <Col span={24}>
                        <span
                          className={prefixCls + 'tmplTimeline-contantLable'}
                        >
                          <span className={prefixCls + 'tmplTimeline-contantLable-userInfoText'}>【{item?.checkDepartmentName || '--'}】</span>
                          -
                          <span className={prefixCls + 'tmplTimeline-contantLable-userInfoText'}>【{item?.checkerName || '--'}】</span>&nbsp; 审核结果为：
                          <span
                            style={{
                              color: checkStateColor(item?.checkState),
                              fontWeight: 600
                            }}
                          >
                            <MyIcon
                              type="icon-dian"
                              style={{
                                color: checkStateColor(item?.checkState),
                                fontSize: 16,
                              }}
                            />
                            {item?.checkState == 0 && '待审核'}
                            {item?.checkState == 1 && '发布'}
                            {item?.checkState == 2 && '驳回'}
                            {item?.checkState == 3 && '作废'}
                          </span>
                        </span>
                      </Col>
                      {/* <Col span={24}>
                        <span
                          className={prefixCls + 'tmplTimeline-contantLable'}
                        >
                          申请原因：
                        </span>
                        {item?.applyResult || '--'}
                      </Col> */}
                      <Col span={24}>
                        <span
                          className={prefixCls + 'tmplTimeline-contantLable'}
                        >
                          审核意见：
                        </span>
                        <span className={prefixCls + 'tmplTimeline-contantLable-userInfoText'}>
                          {item?.checkResult || '--'}
                        </span>
                      </Col>
                    </Row>
                  </Timeline.Item>
                );
              })}
            </Timeline>
          </div>
        </ScrollBarLayout>
      ) : (
        <Row style={{ height: '100%' }}>
          <Empty
            image={Empty.PRESENTED_IMAGE_SIMPLE}
            style={{ width: '100%' }}
          />
        </Row>
      )}
    </>
  );
};
